<template>
	<div>
		sssss
		<table cellpadding='0' cellspacing='0'>
			<tr>
				<td>一级类型ID</td>
				<td>顺序</td>
				<td>一级类型名称</td>
				<td>二级节点信息</td>
			</tr>
			<tr v-for="(item , i) in typelist" :key="item.id">
				<td>{{item.id}}</td>
				<td>{{item.prio}}</td>
				<td>{{item.name}}</td>

				<td>
					<div v-for="index in item.children" :key="index.id">
						<div style="display: flex; width: 100%;" >
							<div>
								{{index.name}}
							</div>
							<div>
								<i class="el-icon-edit"></i>
							</div>
							<div>
								<i class="el-icon-delete"></i>
							</div>
						</div>
						
					</div>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default {
		name: 'SecondType',
		data() {
			return {
				typelist: []
			}
		},
		methods: {
			getAllType() {
				this.$get("/api/adm/type/findAll2").then((res) => {
					if (res.status == 200) {
						console.log(res.data.data);
						var typelist = res.data.data;
						console.log(typelist);
						var news = [];
						//先给假设所有的类型都是第一层，都添加一个children的数组
						typelist.forEach((type) => {
							//type.children = [];//给每个类型都添加一个children的数组
							news[type.id] = {
								...type,
								children: []
							};
						});
						console.log(news);
						console.log(news[0]);

						const newtypes = [];
						typelist.forEach((type) => {
							if (type.pid == 0) {
								//newtypes.push(type);
								newtypes.push(news[type.id]);
							} else {
								//var parent = type;//这样拿不到这个pid的父类型
								var parent = news[type.pid]; //先拿父类型
								console.log('pid : ');
								console.log(parent);
								if (parent) {
									parent.children.push(news[type.id]); //拿到子类型
									//parent.children.push(type);
								}
								console.log('添加完后 : ');
								console.log(parent);
							}
						});
						console.log(newtypes);
						this.typelist = newtypes;
						this.typelist.sort((a, b) => a.prio - b.prio);
						this.typelist.forEach((item) => {
							item.children.sort((a, b) => a.prio - b.prio);
						})
						console.log('数组' + this.typelist);
					}
				})
			}
		},
		mounted() {
			this.getAllType();
		}
	}
</script>

<style>
	td {
			width: 22%;
			border: 1px solid gainsboro;
		}
	
		.find-type1 {
			width: 90%;
			margin: auto;
		}
	
		.find-type1 .head {
			height: 50px;
			line-height: 50px;
		}
	
		.find-type1 .head button {
			margin-left: 300px;
	
		}
</style>
